<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的计算属性和侦听器</title>
    <script src="./vue.js"></script>
</head>
<body>
     <div id="root">
        姓：<input v-model="firstName"/>
        名：<input v-model="lastName"/>
         <!--fullName通过别的数据计算而来-->
         <div>{{fullName}}</div>
         <!--侦听器-->
         <div>{{count}}</div>
     </div>
     <script>
         new Vue({
             el:"#root",
             data:{
                 firstName:'',
                 lastName:'',
                 count:0
             },
             computed:{
                 fullName: function () {
                     return this.firstName + " " + this.lastName
                 }
             },
             watch:{
                 //侦听firstName是否发生改变
                 firstName:function () {
                     this.count++
                 },
                 lastName:function () {
                     this.count++
                 }

             }




         })
     </script>
</body>
</html>